// 购物车页：渲染购物车列表、数量加减、删除、合计与结算按钮
import React from 'react'
// 引入全局选择器与 dispatch 钩子
import { useAppDispatch, useAppSelector } from '../../store/store'
// 引入购物车选择器与动作
import { selectCartItems, selectSelectedTotal, selectSelectedCount, selectIsAllSelected, updateQty, removeFromCart, toggleItemSelection, toggleAllSelection } from '../../store/cartSlice'
// 引入提示组件（可选）
import { Toast } from 'react-vant'
import { NoticeBar } from 'react-vant';
import { NavBar, Checkbox } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './shoppcat.module.scss'
import { DeleteOutline,FileWrongOutline } from 'antd-mobile-icons'
const Index = () => {
  const nav = useNavigate()
  const dispatch = useAppDispatch() // 获取 dispatch
  const items = useAppSelector(selectCartItems) // 从全局状态读取购物车条目
  console.log(items, 'items');

  const selectedTotal = useAppSelector(selectSelectedTotal) // 从全局状态计算选中商品总价
  const selectedCount = useAppSelector(selectSelectedCount) // 从全局状态计算选中商品数量
  const isAllSelected = useAppSelector(selectIsAllSelected) // 是否全选状态

  // 数量加 1（带上 spu 与 sku 标识）
  const handlePlus = (shopSpuId: string, skuId?: string) => {
    const target = items.find(it => it.shopSpuId === shopSpuId && it.skuId === skuId) // 找到当前条目
    if (!target) return // 未找到则返回
    dispatch(updateQty({ shopSpuId, skuId, quantity: target.quantity + 1 })) // 分发数量加 1
  }

  // 数量减 1（最小为 1）
  const handleMinus = (shopSpuId: string, skuId?: string) => {
    const target = items.find(it => it.shopSpuId === shopSpuId && it.skuId === skuId) // 找到当前条目
    if (!target) return // 未找到则返回
    const next = Math.max(1, target.quantity - 1) // 保护数量不小于 1
    dispatch(updateQty({ shopSpuId, skuId, quantity: next })) // 分发数量减 1
  }

  // 删除当前条目
  const handleRemove = (shopSpuId: string, skuId?: string) => {
    dispatch(removeFromCart({ shopSpuId, skuId })) // 分发删除动作
    Toast.success('已删除') // 反馈提示
  }

  // 切换单个商品选中状态
  const handleToggleItem = (shopSpuId: string, skuId?: string) => {
    dispatch(toggleItemSelection({ shopSpuId, skuId })) // 分发切换选中状态
  }

  // 全选/取消全选
  const handleToggleAll = () => {
    dispatch(toggleAllSelection()) // 分发全选切换
  }

  // 结算（示例：仅做提示，可接入下单流程）
  const handleCheckout = () => {
    const selectedItems = items.filter(item => item.selected) // 获取选中的商品
    if (selectedItems.length === 0) { Toast.info('请选择要结算的商品'); return } // 未选择商品提示
    Toast.success(`共 ${selectedItems.reduce((s, it) => s + it.quantity, 0)} 件，合计 ¥${selectedTotal.toFixed(2)}`) // 成功提示
    nav('/addcode')
  }

  // 空状态：当购物车为空时展示友好提示
  if (!items || items.length === 0) {
    return (
      <div className={styles.emptyState}>
        <div className={styles.emptyIcon}><FileWrongOutline /></div> {/* 简易占位图标，可替换为图片 */}
        <div className={styles.emptyText}>购物车空空如也</div> {/* 提示文案 */}
      </div>
    )
  }

  return (
    <div className={styles.container}> {/* 底部留白避免被结算条遮挡 */}
      {/* 列表区域 */}
      <NavBar onBack={() => nav(-1)}>购物车</NavBar>

      {/* 全选栏 */}


      {items.map((it) => (
        <div key={`${it.shopSpuId}-${it.skuId || 'd'}`} className={styles.cartItem}> {/* 每行容器 */}
          <Checkbox
            checked={it.selected || false}
            onChange={() => handleToggleItem(it.shopSpuId, it.skuId)}
            className={styles.itemCheckbox}
          />
          <img src={it.image} alt={it.title} className={styles.itemImage} /> {/* 商品图片 */}
          <div className={styles.itemInfo}> {/* 右侧信息区域 */}
            <div className={styles.titleRow}> {/* 标题与标签行 */}
              {String(it.tag || '').toUpperCase().includes('OTC') && (
                <span className={styles.otcTag}>OTC</span> /* 标签 */
              )}
              <span className={styles.itemTitle}>{it.title}</span> {/* 标题 */}
            </div>
            {it.selectedSpecsText && (
              <div className={styles.itemSpecs}>规格：{it.selectedSpecsText}</div> /* 已选规格展示 */
            )}
            <div className={styles.itemPrice}>¥{it.price}</div> {/* 单价 */}
          </div>
          <div className={styles.quantityControls}> {/* 数量操作区域 */}
            <button onClick={() => handleMinus(it.shopSpuId, it.skuId)} className={styles.quantityBtn}>–</button> {/* 数量- */}
            <div className={styles.quantityDisplay}>{it.quantity}</div> {/* 数量显示 */}
            <button onClick={() => handlePlus(it.shopSpuId, it.skuId)} className={styles.quantityBtn}>+</button> {/* 数量+ */}
            <button onClick={() => handleRemove(it.shopSpuId, it.skuId)} className={styles.deleteBtn}><DeleteOutline /></button> {/* 删除 */}
          </div>
        </div>
      ))}
      
      {/* 当有选中商品时显示通知栏 */}
      {items.some(item => item.selected) && (
        <div className={styles.noticebox}>
          <NoticeBar color="#F56723" background="#FFF7CC">
            <p>
              药品不支持7天无理由退换货，如有处方药，请凭处方单购买。  
            </p>
          </NoticeBar>
        </div>
      )}


      {/* 底部结算条 */}
      <div className={styles.checkoutBar}> {/* 结算条容器 */}
        <div className={styles.selectAllBar}>
          <Checkbox
            checked={isAllSelected}
            onChange={handleToggleAll}
            className={styles.selectAllCheckbox}
          />
          <span className={styles.selectAllText}>全选</span>
        </div>
        <div className={styles.totalInfo}>合计：<span className={styles.totalPrice}>¥{selectedTotal.toFixed(2)}</span></div> {/* 合计金额 */}
        <button onClick={handleCheckout} className={styles.checkoutBtn} >去结算({selectedCount})</button> {/* 结算按钮 */}
      </div>
    </div>
  )
}

export default Index // 导出组件
